<template>
	<view id="tabbar" class="uni-tabbar acea-row row-around row-middle">
		<template>
			<view v-for="(item,index) in tabbar" :key="index"  class="uni-tabbar_item"
				@tap="changeTab(item)">
				<view class="uni-tabbar_icon">
					<image :src="iconPathArr[index]"></image>
				</view>
				<view class="uni-tabbar_label" :class="{'active':item.pagePath == pagePath}">
					{{item.name}}
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		getDiy
	} from '@/api/api.js'
	export default {
		name: 'z_tabBar',
		props:{
			pagePath: null
		},
		created(){
			console.log(this.props);
		},
		data: function() {
			return {
				tabbar: [],
				iconPathArr: ['/static/tabbar/home.png', '/static/tabbar/cate.png', '/static/tabbar/cart.png',
					'/static/tabbar/my.png'
				],
				page:null
			}
		},
		async mounted() {
			let res = await getDiy();
			this.tabbar = res.data.data.z_tabBar.tabBarList.list;
			console.log(this.tabbar);
		},
		methods: {
			changeTab(item) {
				console.log(item);
				this.page = item.pagePath;
				uni.reLaunch({
					url: this.page
				});
			}

		}
	}
	// "/pages/goods_cate/goods_cate"
</script>

<style lang="scss" scoped>
	.uni-tabbar {
		position: fixed;
		bottom: 0;
		z-index: 9999;
		width: 100%;
		height: calc(98rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		box-sizing: border-box;
		border-top: solid 1rpx #F3F3F3;
		background-color: #fff;
		box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
		left: 0px;
		display: flex;

		.uni-tabbar_item {
			font-size: 20rpx;
			text-align: center;
			flex: 1;
		}

		.uni-tabbar_icon {
			height: 50rpx;
			width: 50rpx;
			text-align: center;
			margin: 0 auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.uni-tabbar_label {
			font-size: 24rpx;
			color: #282828;

			&.active {
				color: #ff3366;
			}
		}
	}
</style>
